<template>
    <Card>
      <p slot="title">技师等级</p>
      <div class="search-con search-con-top">
        <div>
          <Button @click="editUserLevel(false)" type="primary" style="margin-left: 10px;">新增技师等级</Button>
          <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        </div>
      </div>
      <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
        <template slot-scope="{ row , index}" slot="makeSlot">
          <Button type="success" size="small" @click="editUserLevel(row)">编辑</Button>
          <Button type="error" size="small" style="margin-left: 10px;" @click="del(row.id)">删除</Button>
        </template>
      </Table>
      <br>
  
      <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize">
      </Page>
  
      <!-- 编辑 -->
      <Modal v-model="editUserModal" title="技师等级" @on-ok="editUserModalOk" width="30">
        <Form :model="formUserItem" :label-width="80" >
          <FormItem label="等级名称">
            <Input v-model="formUserItem.level_name" placeholder="请输入等级名称"></Input>
          </FormItem>
          <FormItem label="等级图标">
            <Upload ref="upload" name="image" :headers="header" :action="action_url" :show-upload-list="false"
              :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
              <Button icon="ios-cloud-upload-outline">点击上传</Button>
            </Upload>
          </FormItem>
          <FormItem class="item">
            <img :src="baseUrl + formUserItem.level_img" style="width: 100px;height: 100px;"
              v-show="formUserItem.level_img">
          </FormItem>
          <FormItem label="成长值">
            <Input v-model="formUserItem.num" placeholder="请输入成长值" type="number"></Input>
          </FormItem>
          <FormItem label="提成比例">
            <Input v-model="formUserItem.ratio" placeholder="请输入提成比例" type="number"></Input>
            <Alert type="error">等级享受的提成比例，填写0~100，例如75折表示100元订单提成75元。</Alert>
          </FormItem>
          <FormItem label="等级说明">
            <Input v-model="formUserItem.intro" placeholder="请输入等级说明"></Input>
          </FormItem>
        </Form>
      </Modal>
    </Card>
  </template>
  
  <script>
  import config from "@/config";
  import { getToken } from "../../libs/util";
  const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
  export default {
    name: "technicianLevel",
    data() {
      return {
        baseUrl: baseUrl,
        action_url: baseUrl + "/admin/image/uploadImg",
        header: { Authorization: getToken() },
        // 列表
        columns: [
          {
            title: '等级名称',
            key: 'level_name',
          },
          {
            title: '成长值',
            key: 'num',
          },
          {
            title: '等级图标',
            key: 'level_img',
            render: (h, param) => {
              return h("img", {
                attrs: {
                  src: baseUrl + param.row.level_img
                },
                style: {
                  width: '80px',
                  height: '60px'
                }
              });
            }
          },
          {
            title: '佣金比例',
            key: 'ratio',
          },
          {
            title: '等级说明',
            key: 'intro',
          },
  
          {
            title: '操作',
            slot: 'makeSlot',
            width: 210
          },
        ],
        // 数据
        list: [],
        total: 0,
        editUserModal: false,
        formUserItem: {
          id: 0,
          level_name: "",
          level_img: '',
          num: "",
          ratio: "",
          intro: ""
        },
      }
    },
    methods: {
      // 查询管理员信息
      getList() {
        let params = {
          ...this.searchData,
        };
        this.$axios('/admin/tec_level/getList', params).then(res => {
          this.list = res.data;
          this.total = res.total;
        });
      },
      search() {
        this.searchData.page = 1;
        this.getList();
      },
      reset() {
        this.searchData = {
          page: 1,
          limit: 10,
        };
        this.getList();
      },
      changePage(page) {
        this.searchData.page = page;
        this.getList();
      },
      changeSize(size) {
        this.searchData.limit = size;
        this.getList();
      },
      editModalCancel() { },
      edit(row) {
        this.formItem.id = row.id;
        this.editModal = true;
      },
      editUserLevel(row) {
        if(row){
          this.formUserItem = row;
        }
        
        this.editUserModal = true;
      },
      editUserModalOk() {
        if (this.formUserItem.id > 0) {
          this.$axios('/admin/tec_level/edit', this.formUserItem).then(res => {
            this.$Message.success('编辑成功');
            this.formUserItem = {};
            this.getList();
          });
        } else {
          this.$axios('/admin/tec_level/add', this.formUserItem).then(res => {
            this.$Message.success('添加成功');
            this.formUserItem = {};
            this.getList();
          });
        }
  
      },
      del(id) {
        this.$axios('/admin/tec_level/del', { id: id }).then(res => {
          this.$Message.success('删除成功');
          this.getList();
        });
      },
      handleSuccess(res, file) {
        this.formUserItem.level_img = res.data.src;
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: "文件格式错误",
          desc: "不支持该文件类型",
        });
      },
    },
    created() {
      this.getList();
    }
  }
  </script>
  <style></style>
  